<template>
  <div class="otc-body">

    <FullHeadImg backImage="otc/otc-head-bg.png">
      <template #default>
        <h1>Institutional OTC</h1>
        <p>Empowering the next generation of investors</p>
      </template>
    </FullHeadImg>

    <section class="otc-feature body-m">
      <div class="feature-item" v-for="(item, idx) in otcFeatures" :key="idx">
        <img :src="getImage(item.image)" alt="">
        <p>{{ item.feature }}</p>
      </div>
    </section>

    <section class="otc-trade body-m">
      <h2>Institutional-grade OTC Trade</h2>
      <p>We work with traditional institutions looking to begin their digital assets journey
        and established digital assets traders. Our customers benefit from white-glove, personalized service from
        initial consultation, onboarding, to trade execution.
      </p>
      <div class="otc-trade-features">
        <div class="feature-item gradient-card" v-for="(item, idx) in tradeFeatures" :key="idx">
          <img :src="getImage(item.image)" alt="">
          <h4>{{ item.title }}</h4>
          <p>{{ item.feature }}</p>
        </div>
      </div>
    </section>


    <FullHeadImg backImage="otc/otc-mid-bg.png">
      <template #default>
        <h2 style="text-align: left;">
          We provide deep liquidity with <br> reliable on and off ramp capability, <br>at most
          competitive pricing
        </h2>
      </template>
    </FullHeadImg>

    <section class="otc-locations body-m">
      <h2>Global Locations</h2>
      <div class="location-clocks">
        <TimeClock timezone="Europe/London" label="London, UK" />
        <TimeClock timezone="Asia/Singapore" label="Singapore" />
        <TimeClock timezone="America/New_York" label="New York, USA" />
      </div>
    </section>

    <section class="otc-questions body-m">
      <h2>Questions?</h2>
      <el-collapse v-model="state.activeQue" accordion>
        <el-collapse-item v-for="(item, idx) in questions" :title='item.title' :name="item.name" :key="idx">
          <div class="question-desc-item" v-for="(desc, idx) in item.desc" :key="idx">{{ desc }}</div>
        </el-collapse-item>
      </el-collapse>
    </section>

    <section class="otc-team-eligibility body-m">
      <h2>Terms and eligibility</h2>
      <div class="team-eli">
        <p class="gradient-card">Eligibility for OTC trading is subject to applicable KYC/KYB and AML/CFT laws and
          regulations.</p>
        <p class="gradient-card">All trades must be pre-funded in cryptocurrency (for off ramp) or fiat (for on ramp),
          Honeybee do not
          offer any credit line or margin trading to trading counterparties.</p>
        <p class="gradient-card">Honeybee do not hold custody of any cryptocurrency or digital assets on behalf of
          trading
          counterparties.</p>
      </div>
    </section>

    <ReadyGetStart />

    <section></section>
  </div>
</template>

<script setup lang="ts" name="OTCView">
import TimeClock from '@/components/TimeClock.vue';
import ReadyGetStart from '@/components/ReadyGetStart.vue';
import { reactive } from 'vue';


const state = reactive({
  activeQue: ''
})

const otcFeatures = [
  { image: 'otc/otc-f1.png', feature: 'Institutional-grade trading experience with 24/7 support' },
  { image: 'otc/otc-f2.png', feature: 'Spot delivery at the most competitive pricing' },
  { image: 'otc/otc-f3.png', feature: 'Ensuring the ecosystem grows compliantly, sustainably, and healthily' },
]

const tradeFeatures = [
  { image: 'otc/otc-t1.png', title: 'Onboarding', feature: 'Close handholding to guide you through our KYC/KYB process, with always-on and personalized chat service we aim to bring you onboard within the shortest timeframe' },
  { image: 'otc/otc-t2.png', title: 'Trade', feature: 'OTC trades with private, personalized services, chat securely with our trade desk to confirm the asset, size, and price of your trade.' },
  { image: 'otc/otc-t3.png', title: 'Execution', feature: 'Timely and round-the-clock trade execution, flexible settlement arrangements allow you to settle trades with your exchange account, your bank (in EUR, GBP and USD), or an external wallet of your choice within 24 hours.' },
]

const questions = [
  {
    title: 'What is OTC, on ramp and off ramp?', name: 'q1', desc: [
      'Over-the-counter (OTC) trading is a private and flexible method for buying or selling cryptocurrencies without relying on public exchanges. Unlike traditional exchanges, where transactions are visible and influenced by market fluctuations, OTC trading provides a discreet, direct channel between buyers and sellers.',
      'On ramp refers to using fiat currencies (e.g., USD, EUR) to buy cryptocurrencies or digital assets (e.g., USDT, BTC)',
      'Off ramp refers to selling cryptocurrencies or digital assets (e.g., USDT, BTC) to fiat currencies (e.g., USD, EUR)'
    ]
  },
  {
    title: 'Why use OTC desk to trade crypto?', name: 'q2', desc: [
      'OTC trading enables a more tailored approach to trading, as the parties involved interact directly with each other. This service is commonly used for executing larger trades that may not be feasible on traditional exchanges due to liquidity constraints. It is also an interesting solution for trading low-liquidity digital assets.',
      'OTC trading also offers better security, mitigates potential fear-driven market movements, and reduces counter-party risk as transactions take place between two KYC-compliant entities.'
    ]
  },
  {
    title: 'Which currencies do we support for OTC trading?', name: 'q3', desc: [
      'In terms of cryptocurrencies or digital assets, we support: BTC, ETH, USDT, USDC, other currencies can be requested on demand',
      'In terms of fiat currencies, we support: USD, EUR and GBP, other currencies can be requested on demand.'
    ]
  },
  {
    title: 'Why should you use us for OTC crypto trading?', name: 'q5', desc: [
      'Our bespoke deals are designed to help our partners execute trades by mitigating slippage that can occur when trading large volumes on exchanges. We prioritize your privacy and security, as all trades are conducted directly between the concerned parties.',
      'Our team of experts is dedicated to delivering exceptional support and assistance before your purchase. We take great pride in helping our partners achieve their goals and making sure they have the best trading experience possible.'
    ]
  }
]

</script>

<style scoped lang="scss">
.otc-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.otc-feature {
  display: flex;
  justify-content: space-around;
  gap: 4rem;

  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex: 1;

    img {
      width: 50px;
      height: 50px;
    }
  }
}

.otc-trade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;

  .otc-trade-features {
    display: flex;
    justify-content: space-around;
    gap: 2rem;

    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      flex: 1;

      img {
        width: 50px;
      }

      .trade-title {
        font-weight: bold;
      }
    }
  }
}

.otc-tamp {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;

  h2 {
    width: 100%;
    text-align: left;
  }
}

.otc-locations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  .location-clocks {
    display: flex;
    justify-content: space-around;
    gap: 4rem;
  }
}

.otc-questions {
  width: 100%;

  h2 {
    padding-bottom: 2rem;
  }

  .question-desc-item {
    margin: 1rem 0;
    font-size: 1rem;
  }
}

.otc-team-eligibility {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  .team-eli {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    div {
      flex: 1;
      background: #F3D523;
    }
  }
}

@media (max-width: 1000px) {
  .otc-locations .location-clocks {
    gap: 1rem;
    flex-direction: column;
  }
}

@media (max-width: 700px) {

  .otc-body {
    gap: 2rem;
    flex-direction: column;
    align-items: center;
  }

  .otc-feature {
    gap: 2rem;
    flex-direction: column;
  }

  .otc-trade .otc-trade-features {
    flex-direction: column;
    gap: 2rem;
  }

  .otc-team-eligibility .team-eli {
    flex-direction: column;
  }

  .otc-questions {
    width: 100%;
  }
}
</style>